<template>
  <div id="map-container" class="map-container"/>
</template>
<script>
import { createCarMarker, createOrderMarker } from './libs/marker'
import { mapActions, updatteModel } from 'vuex'
export default {
  name: 'AmapView',
  props: {
    cars: {
      type: Array,
      default() {
        return []
      }
    },
    controlStatus: {
      type: Number,
      default: 0
    },
    orders: {
      type: Array,
      default() {
        return []
      }
    },
    mapStyle: {
      type: String,
      default: 'dark'
    },
    scale: {
      tyep: Boolean,
      default: false
    },
    toolBarRuler: {
      tyep: Boolean,
      default: false
    },
    overView: {
      tyep: Boolean,
      default: false
    }
  },
  data() {
    return {
      orderMarkers: [],
      carMarkers: [],
      mapObj: null,
      currentOrder: null,
      currentCar: null,
      style: 'dark',
      plugs: {}
    }
  },
  watch: {
    mapStyle(mapStyle) {
      this.style = mapStyle
      this.mapObj.setMapStyle('amap://styles/' + this.style)
    },
    cars(cars) {
      this.cars = cars
      if (cars != null) {
        this.initCarMarker()
      }
    },
    controlStatus(controlStatus) {
      if (controlStatus === 1) {
        const h = this.$createElement
        this.$notify({
          title: '系统提示',
          duration: 2000,
          message: h('i', { style: 'color: red' }, '您已进入调派模式点击车辆即可调派')
        })
      } else {
        const h = this.$createElement
        this.$notify({
          title: '系统提示',
          duration: 2000,
          message: h('i', { style: 'color: red' }, '您已退出调派模式')
        })
      }
      this.initOrderMarker()
      this.initCarMarker()
    },
    orders(orders) {
      if (this.controlStatus === 0) {
        this.orders = orders
        if (orders) {
          if (orders != null) {
            this.initOrderMarker()
          }
        }
      }
    },
    scale(scale) {
      if (scale) {
        this.plugs.scale.show()
      } else {
        this.plugs.scale.hide()
      }
    },
    toolBarRuler(toolBarRuler) {
      if (toolBarRuler) {
        this.plugs.toolBarRuler.show()
      } else {
        this.plugs.toolBarRuler.hide()
      }
    },
    overView(overView) {
      if (overView) {
        this.plugs.overView.open()
      } else {
        this.plugs.overView.close()
      }
    }
  },
  mounted() {
    const then = this
    then.intit()
  },
  methods: {
    ...mapActions([
      'changeControlStatus'
    ]),
    getCurrentOrder() {
      return this.currentOrder
    },
    getCurrentCar() {
      return this.currentCar
    },
    /**
     * 初始化地图组件
     */
    intit() {
      /* eslint-disable no-alert, no-console */
      this.mapObj = new AMap.Map('map-container', {
        zoom: 13,

        mapStyle: 'amap://styles/' + this.style// darkblue 极夜蓝  normal 标准 whitesmoke 远山黛 dark  幻影黑 light 月光银
      })
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.CircleEditor'], () => {
        this.plugs.scale = new AMap.Scale()
        this.plugs.overView = new AMap.OverView()
        this.plugs.toolBarRuler = new AMap.ToolBar()
        this.mapObj.addControl(this.plugs.scale)
        this.mapObj.addControl(this.plugs.overView)
        this.mapObj.addControl(this.plugs.toolBarRuler)
        this.plugs.scale.hide()
        this.plugs.toolBarRuler.hide()
      })
    },
    initOrderMarker() {
      this.mapObj.remove(this.orderMarkers)
      this.orders.forEach((item, i) => {
        if (item.status === 1) {
          if (this.controlStatus === 1) {
            if (item.orderId === this.currentOrder.orderId) {
              this.addMarker(item, 2)
            }
          } else {
            this.addMarker(item, 2)
          }
        }
      })
    },
    initCarMarker() {
      this.mapObj.remove(this.carMarkers)
      this.cars.forEach((item, index) => {
        if (this.controlStatus === 1) {
          if (item.workstatus === 0) {
            this.addMarker(item, 1)
          }
        } else {
          this.addMarker(item, 1)
        }
      })
    },
    /**
     * 订单标点菜单点击事件
     */
    onOrderMenuClick(index, order) {
      if (index === 0) {
        this.currentOrder = order
        this.changeControlStatus(1)
      } else {
        this.$emit('onOrderMenuClick', index, order)
      }
    },
    onCarMarkerClick(car) {
      if (this.controlStatus === 1) {
        this.currentCar = car
        this.$emit('onCarMarkerClick', car)
      }
    },
    /**
     * 车辆标点菜单点击事件
     */
    onCarMenuClick(index, car) {
      this.$emit('onCarMenuClick', index, car)
    },
    /**
     * 添加标点
     */
    addMarker(ob, type) {
      if (type === 1) {
        const marker = createCarMarker(this.mapObj, ob, this.controlStatus, this.onCarMenuClick, this.onCarMarkerClick)
        marker.tag = ob.id
        this.carMarkers.push(marker)
      } else {
        const marker = createOrderMarker(this.mapObj, ob, this.controlStatus, this.onOrderMenuClick)
        marker.tag = ob.orderId
        this.orderMarkers.push(marker)
      }
    }
  }
}
</script>
<style>
  .amap-marker-label{
    border: 0;
    background-color: white;
    border-radius: 4px;
  }

  .carInfo{
    position: relative;
    top: 0;
    right: 0px;
    min-width: 0;
  }
</style>
<style scoped>
  .map-container{
    height: 100%;
    width: 100%;
    position: relative;
  }

</style>
